<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-form label-width="98px" class="app-content" :model="ruleForm" ref="ruleForm">
            <div class="box">
                <div class="appTitle">课程表详情</div>
                <div class="appTop"><P>班级课程表</p></div>
                <el-row class='searchCon'>               
                    <el-col :span="6">
                        <el-form-item label="学校名称：">
                            <span>{{ruleForm.schoolName}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="班级名称：">
                            <span>{{ruleForm.className}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="班表格式：">
                            <span v-if="ruleForm.classType=='0'">5 * 8格</span>
                            <span v-if="ruleForm.classType=='1'">7 * 12格</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="appTop"><P>班表</p></div>
                <div class='tableSmall' v-if="ruleForm.classType=='0'">
                    <el-button @click='goPrint' class='goPrint'>去打印</el-button>
                    <smallSyllabus :dataList='ruleForm.dataList1' ref='getSmallData'></smallSyllabus>
                </div>
                <div class='tableBig' v-if="ruleForm.classType=='1'">
                    <el-button @click='goPrint2' class='goPrint'>去打印</el-button>
                    <bigSyllabus ref='getBigData' :dataList='ruleForm.dataList2'></bigSyllabus>
                </div>
                <div class="footer">
                    <el-button @click='resetForm'>返 回</el-button>
                    <el-button type="primary" @click="submitForm">保 存</el-button>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import smallSyllabus from './comps/smallSyllabus';
import bigSyllabus from './comps/bigSyllabus';
import {getWisdomSubject, updateWisdomSubject} from 'api/wisdom';
export default{
    name: 'syllabusDetail',
    components: {Levelbar, smallSyllabus, bigSyllabus},
    data() {
        return { 
            ruleForm: {
                classId: '',
                schoolId: '',
                schoolName: '',
                className: '',
                classType: '',
                dataList1: [], // 5*8课程表数据
                dataList2: [] // 7*12课程表数据
            }
        }
    },
    created() {
        this.getWisdom(); // 获取课程表数据
    },
    methods: {
        // 提交
        submitForm(formName) {
            this.$confirm('确定要修改课程表吗?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                if (this.ruleForm.classType=='0') {
                    this.ruleForm.sSubjectName = this.$refs.getSmallData.getDataApply();
                } else {
                    this.ruleForm.sSubjectName = this.$refs.getBigData.getDataApply();
                }
                let pid = this.$route.params.classId.split(';')[1];
                updateWisdomSubject(pid, this.ruleForm.schoolId, this.ruleForm.classType, this.ruleForm.schoolName, this.ruleForm.classId, this.ruleForm.className, this.ruleForm.sSubjectName).then(response => {              
                    this.$message({
                        type: 'success',
                        message: '修改课程表成功'
                    })
                    this.$store.dispatch('UpdateCache', true);// 修改 和查看
                    window.history.back();
                });
            })
            
        },
        // 获取详情
        getWisdom() {
            getWisdomSubject(this.$route.params.classId.split(';')[0]).then(response => {
                this.ruleForm.schoolName = response.data.content.sSchoolName;
                this.ruleForm.className = response.data.content.sClassName;
                this.ruleForm.classType = response.data.content.sType;
                this.ruleForm.schoolId = response.data.content.fSchoolId;
                this.ruleForm.classId = response.data.content.fClassId;
                if (this.ruleForm.classType=='0') { // 5x8课程表
                    this.ruleForm.dataList1 = response.data.content.subjectNames;
                    this.$nextTick(() => {
                        this.$refs.getSmallData.create();
                    })
                } else { // 7x14课程表
                    this.ruleForm.dataList2 = response.data.content.subjectNames;
                    this.$nextTick(() => {
                        this.$refs.getBigData.create();
                    })
                }
            })
        },
        // 返回
        resetForm() {
            window.history.back();
        },
        // 跳转打印5x8课程表
        goPrint() {
            this.$router.push({path: `/wisdomMange/syllabusMange/goPrintSmall/${this.$route.params.classId.split(';')[0]}`});
        },
        // 跳转打印7x12课程表
        goPrint2() {
            this.$router.push({path: `/wisdomMange/syllabusMange/goPrintBig/${this.$route.params.classId.split(';')[0]}`});
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .el-form{
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        background:#fff;
        padding-bottom:100px;
        .appTitle{
            padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        .appTop{
            position: relative;
            font-size: 14px;
            color: rgb(106, 85, 72);
            padding-left: 16px;
            margin: 30px 0;
            display: block;
            &::after {
                position: absolute;
                content:'';
                width: 4px;
                height: 14px;
                background: #ff5e2c;
                left: 0;
                top: 3px;
            }
        }
        .box{
            padding: 0px 50px 0;
            background:#fff;
        }
       .footer{
            text-align:center;
            margin-top:90px;
        }
        .tableSmall{
            width:100%;
            height:420px;
            margin-bottom:100px
        }
        .tableBig{
            width:100%;
            height:560px;
        }
        .goPrint{
            padding:10px 30px;
            margin-left:18px
        }
    }
    
}

</style>
